//hash路由：HashRouter  history路由： BrowserRouter
import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom"
// import Button from "./views/Button.jsx"
import "./views/App.css"
import router from "./router/index"

function App(){
    return (
    <BrowserRouter>
    <div>
        {/* 点击 让路由发生变化 */}
        {/* <ul>
            <li><NavLink to="/home" className={({ isActive }) => isActive ? "my":""}>首页</NavLink></li>
            <li><NavLink to="/classify" className={({ isActive }) => isActive ? "my1" : ""}>分类</NavLink> </li>
            <li><NavLink to="/car" className={({ isActive }) => isActive ? "my2" : ""}>购物车</NavLink></li>
            <li><NavLink to="/tabbar" className={({ isActive }) => isActive ? "my" : ""}>底部导航栏</NavLink></li>
            <li><Button>解说</Button></li>
        </ul> */}
                <div className="hun">
                    <span><NavLink to="/tabbars/1" className={({ isActive }) => isActive ? "aa" : ""}>首页</NavLink></span>
                    <span><NavLink to="/tabbars/2" className={({ isActive }) => isActive ? "aa" : ""}>课程</NavLink></span>
                    <span><NavLink to="/tabbars/3" className={({ isActive }) => isActive ? "aa" : ""}>练习</NavLink></span>
                    <span><NavLink to="/tabbars/4" className={({ isActive }) => isActive ? "aa" : ""}>我的</NavLink></span>
                </div>

        <div>
            {/* 根据路由 加载对应的组件  v5 -v6 区别*/}    
            {/* <Switch></Switch>  不能使用  用 <Routes> */}
             {/* <Route ></Route>  不能单独使用 要写在 <Routes> 中*/}

             {/* <Route component={} ></Route>  
                        v6写成  <Route element={} ></Route>*/}
             {/* 重定向 <Route path="/">  < Redirect to="/aaa" />  </Route> 
                        v6 写成  <Route path="/" element={<Navigate to="/car"></Navigate>} /> */}

            <Routes>
               {
                router.map((v, i) => <Route path={v.path} element={v.element} key={i}></Route>)
               }   
            </Routes>
          
        </div>
    </div>
    </BrowserRouter>
    )
}

export default App

// 父组件的jsx 传递到 子组件
